React Native小白(超简单精致的顶部导航栏):使用react |
您所在的位置：网站首页 › react 顶部导航 › React Native小白(超简单精致的顶部导航栏):使用react |
React Native小白(超简单精致的顶部导航栏):使用react
|
实现效果如下： 点击顶部输入框按钮可以实现输入。 首先需要安装： npm install react-native-tab-navigator --save然后在需要做导航栏的文件引入： import TabNavigator from 'react-native-tab-navigator';下面就可以编写顶部导航栏了，以下是完整代码： import React, { Component } from 'react' import { Image, Text, TextInput, View, Platform, StyleSheet } from 'react-native'; import TabNavigator from 'react-native-tab-navigator'; //export 因为要在其他类中使用 export default class TopTabBar extends Component{ render(){ return ( require('./images/header/header_logo.png')} style={styles.logo}/> styles.searchBox}> styles.searchIcon}/> require('./images/header/icon_voice.png')} style={styles.voiceIcon}/> styles.scanIcon}/> ) } tabNavigatorItems(selectedTab,title,icon,selectedIcon,imageStyle,mark,viewContent){ return ( ()=> icon}/> } renderSelectedIcon={()=> tintColor:imageStyle}]} source={selectedIcon}/> } badgeText={mark} onPress={()=> this.setState({selectedTab:selectedTab}) }> flex:1}}>{viewContent} ) } } //样式 const styles = StyleSheet.create({ container: { flexDirection: 'row', // 水平排布 paddingLeft: 10, paddingRight: 10, paddingTop: Platform.OS === 'ios' ? 20 : 0, height: Platform.OS === 'ios' ? 68 : 48, backgroundColor: '#d74047', alignItems: 'center' // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中 }, logo: {//图片logo height: 50, width: 50, resizeMode: 'stretch' // 设置拉伸模式 }, searchBox:{//搜索框 height:30, flexDirection: 'row', // 水平排布 flex:1, borderRadius: 5, // 设置圆角边 backgroundColor: 'white', alignItems: 'center', marginLeft: 8, marginRight: 8, }, searchIcon: {//搜索图标 height: 20, width: 20, marginLeft: 5, resizeMode: 'stretch' }, inputText:{ flex:1, backgroundColor:'transparent', fontSize:12, height:100 }, voiceIcon: { marginLeft: 5, marginRight: 8, width: 20, height: 20, resizeMode: 'stretch' }, scanIcon: {//搜索图标 height: 26.7, width: 26.7, resizeMode: 'stretch' }, container1: { flex:1, backgroundColor: '#F5FCFF', }, myImage:{ width:22, height:22, }, text:{ fontSize:22, color: 'lightskyblue', fontWeight:'bold', fontStyle:'italic' }, }); |
【本文地址】
今日新闻 |
推荐新闻 |